<template>
  <div style="width: 1200px;margin: 0 auto">
    <h1>详情页面/student-bookstore/book-detail</h1>
    <el-container style="align-content: center">
      <!--导航部分-->
      <el-header style="height: 40px;background-color: rgba(99,99,99,0.3)">
        <el-breadcrumb separator-class="el-icon-arrow-right"
                       style="padding: 13px">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <!--内容-->
      <el-main>
        <el-container>
          <!--详情头部+购买-->
          <el-header style="width: 1136px; height: 502px">
            <el-row style="">
              <!--图片的展示-->
              <el-col :span="12">
                <div class="grid-content bg-purple" style="margin: 0px 30px">
                  <div style="width: 430px;height: 502px; align-content: center">
                    <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="375"
                         height="375">
                    <div style="width: 375px;height: 67px;margin: 20px">
                      <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="65" height="65" style="padding: 0px 10px">
                      <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="65" height="65" style="padding: 0px 10px">
                      <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="65" height="65" style="padding: 0px 10px">
                    </div>
                  </div>
                </div>
              </el-col>
              <!--购买操作-->
              <el-col :span="12">
                <div class="grid-content bg-purple-light" style="text-align: left ;width: 640px;">
                  <span>
                    <p><b>商品标题</b></p>
                    </span>
                  <el-divider></el-divider>
                  <div style="height: 50px ;background-color: rgba(146,132,132,0.1);width: 640px">
                    <p style="font-size: 25px;font-weight: bold;line-height:50px">
                      <span>活动价:111111</span>
                      <span style="font-size: 15px;color: #666">原价：<s>499</s> </span>
                    </p>
                  </div>

                  <div style="margin: 10px 0px">
                    <el-row>
                      <el-col :span="3">
                        <div class="grid-content bg-purple">
                          <p style="line-height: 40px">配送至：</p>
                        </div>
                      </el-col>
                      <el-col :span="21">
                        <div class="grid-content bg-purple-light" style="padding: 0px 0px 5px 0px">
                          <div id="app" style="width: 200px">
                            <el-cascader style="text-align: left"
                                         size="large"
                                         :options="options"
                                         v-model="selectedOptions"
                                         @change="handleChange">
                            </el-cascader>
                          </div>
                        </div>
                      </el-col>
                    </el-row>

                    <div style="margin: 10px 0px">
                      <el-row>
                        <el-col :span="3">
                          <div class="grid-content bg-purple">
                            <p style="line-height: 40px">数量：</p>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content bg-purple-light">
                            <template>
                              <el-input-number v-model="num" @change="count" :min="1" :max="10"
                                               label="描述文字"></el-input-number>
                            </template>
                          </div>
                        </el-col>
                      </el-row>
                    </div>

                    <div style="padding: 10px 0px 0px 0px;">
                      <el-button plain style="margin: 0px 10px 0px 80px" @click="addShopping()">加入购物车</el-button>
                      <el-button type="danger" @click="buy">点击购买</el-button>
                    </div>

                  </div>
                </div>
              </el-col>
            </el-row>
          </el-header>

          <div style="height: 50px ;text-align: left;background-color: rgba(115,115,115,0.1)">
            <p style="line-height:50px">相关推荐</p>
          </div>
          <el-row style="height: 274px;width: 1184px">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div style="margin: 8px;padding: 10px">
                  <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="160"
                       height="160">
                </div>
                <a href="">xxxxx商品</a>
                <p>￥:199</p>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div style="margin: 8px;padding: 10px">
                  <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="160"
                       height="160">
                </div>
                <a href="">xxxxx商品</a>
                <p>￥:199</p>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div style="margin: 8px;padding: 10px">
                  <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="160"
                       height="160">
                </div>
                <a href="">xxxxx商品</a>
                <p>￥:199</p>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div style="margin: 8px;padding: 10px">
                  <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="160"
                       height="160">
                </div>
                <a href="">xxxxx商品</a>
                <p>￥:199</p>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div style="margin: 8px;padding: 10px">
                  <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="160"
                       height="160">
                </div>
                <a href="">xxxxx商品</a>
                <p>￥:199</p>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div style="margin: 8px;padding: 10px">
                  <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" width="160"
                       height="160">
                </div>
                <a href="">xxxxx商品</a>
                <p>￥:199</p>
              </div>
            </el-col>

          </el-row>
          <el-container>
            <!--详情下左-->
            <el-aside width="182px" style="padding: 20px 0px">
              <el-card shadow="always">
                <div style="margin:0px">
                  <span>热门推荐</span>
                </div>
                <div>
                  <div >
                    <div style="margin:20px 8px 0px 8px">
                      <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png"
                           width="100"
                           height="100">
                    </div>
                    <a href="">xxxxx商品</a>
                    <p>￥:199</p>
                  </div>

                  <div >
                    <div style="margin:20px 8px 0px 8px">
                      <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png"
                           width="100"
                           height="100">
                    </div>
                    <a href="">xxxxx商品</a>
                    <p>￥:199</p>
                  </div>

                  <div >
                    <div style="margin:20px 8px 0px 8px">
                      <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png"
                           width="100"
                           height="100">
                    </div>
                    <a href="">xxxxx商品</a>
                    <p>￥:199</p>
                  </div>

                </div>
              </el-card>
            </el-aside>

            <!--详情下右-->
            <el-main>
              <el-tabs type="border-card">
                <el-tab-pane label="商品详情">
                  <div>
                    <div style="height: 18px ;width: 740px;text-align: left;margin: 14.9px">
                      <h2>商品详情</h2>
                    </div>
                    <el-divider></el-divider>
                    <img
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TjI2vVjTt4yF6JA2B9lwQQHa0l?w=56&h=399&c=7&r=0&o=5&pid=1.7"
                        width="700" height="2134">
                  </div>
                </el-tab-pane>
                <el-tab-pane label="规格属性">
                  <el-descriptions class="margin-top" title="普通信息" :column="1" :size="medium " border>
                    <el-descriptions-item>
                      <template slot="label">
                        商品编码（ISBN）
                      </template>
                      9787512717152T
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        出版时间
                      </template>
                      2020-09-01
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        出版社
                      </template>
                      中国妇女出版社
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        作者
                      </template>
                      沈复、陆绍珩
                    </el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="售后策略">
                  <div style="text-align: left">
                    <span ><b>正品行货</b> </span><br><br>
                    <span>新华书店网上商城向您保证所售商品均为正品行货，所有商品开具电子发票。</span><br><br>
                    <br><br>
                    <span ><b>售后服务承诺</b> </span><br><br>
                    <span>1) 新华书店网上商城支持商品7天内无理由退换货（不影响二次销售），
                      15天内可以换货，以客户收到商品第二日起计算。<br>（食品、酒类等非图书商品非质量问题不予退换）</span><br><br>
                    <span>2) 平台售后审核人员在客户提交申请后72小时之内完成审核。</span><br><br>
                    <span>3) 退换货业务均会在自接收到问题商品之日起7日之内处理完成，国家法定节假日不计算在内。
                    </span><br>
                  </div>

                </el-tab-pane>
                <el-tab-pane label="累计评价">
                  <el-empty description="该商品还没有评价~"></el-empty>
                </el-tab-pane>
              </el-tabs>
            </el-main>
          </el-container>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//配送地址数据库
import {CodeToText, regionData} from "element-china-area-data";

export default {
  data() {
    return {
      imgs: [],

      //配送地址
      options: regionData,
      selectedOptions: [],
      num: 1,

      //下左的导航菜单
      activeName: 'second'


    }
  },
  mounted() {
  },
  methods: {
    //配送地址
    handleChange(value) {
      console.log("省市区code：", value[0], value[1], value[2]);
      console.log('省市区：', CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]);
    },

    count(value) {
      console.log(value);
    },
    addShopping() {
      console.log("点击加入购物车")
    },
    buy() {
      console.log("点击购买")
    },

    //下左的导航菜单


  }
};
</script>

<style lang="scss">
</style>